<template>
  <view class="form-wrap">
    <u--form labelPosition="left" :model="model" :rules="rules" errorType="toast" ref="uForm">
      <u-form-item class="item" className="img-formItem">
        <view class="item-label">学校</view>
        <view class="item-content">
          <u-input type="text" v-model="model.nickName" placeholder="请输入姓名" border="none"/>
        </view>
      </u-form-item>
      <u-form-item class="item" prop="nickName">
        <view class="item-label">昵称</view>
        <view class="item-content">
          <u-input type="text" v-model="model.nickName" placeholder="请输入姓名" border="none"/>
        </view>
      </u-form-item>

      <view class="btn-wrap">
        <button @click="handleSub">{{subTxt}}</button>
      </view>
    </u--form>
  </view>

</template>

<script>
export default {
  name: "index",
  props: {
    model: {
      type: Object,
      default() {
        return {}
      }
    },
    rules: {
      type: Object,
      default() {
        return {}
      }
    },
    subTxt: {
      type: String,
      default: '保存'
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleSub() {
      return new Promise((resolve, reject) => {
        this.$refs.uForm.validate().then(res => {
          resolve(res)
        }).catch(err=>{
          reject(err)
        })
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  padding: 0 20rpx;
}
.item-label {
  width: 100%;
  height: auto;
  font-weight: bold;
  color: #000;
  font-size: 30rpx;
}
.item-content {
  width: 100%;
  min-height: 80rpx;
  height: auto;
  margin-top: 30rpx;
}
::v-deep .item-content input {
  width: 100%;
  min-height: 80rpx;
  height: auto;
  background-color: #efefef;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.btn-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
}
.btn-wrap button {
  border: none;
  width: 90%;
  height: 70rpx;
  line-height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $global-color-golden;
  border-radius: 35rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 400;
}
</style>